<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title></title>
    <link rel="stylesheet" type="" href="./animate.css">
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    header{
        width: 100%;
        height: 50px;
        background-color: #10C55B;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    
    .right{
        line-height: 50px;
        float: left;
        
    }
    div a{
        color: white;
        text-decoration: none;
        display: block;
    }
    .right-div div a:hover{
        background-color: #01AC48;
    }
    .right-div div{
        line-height: 50px;
        float: left;
         text-align: center; 
    }
    .right-div .one{
        background-color: #01AC48;
        width: 64px;
    }
    .right-div .two{
        width: 113px;
    }
    .right-div .three{
        width: 96px;
    }
     .right-div .four{
        width: 63px;
    } 
    .right-div .four a{
        height: 62px;
        margin-top: -12px;
        font-size: 40px;
    }
    .left-div div{
        line-height: 50px;
        float: left;
        margin-left: 10px;
        text-align: center;
    }
    .left-div{
         width: 280px; 
        /* margin-left :500px; */
    }
    header .container{
        display: flex;
        justify-content: space-between;
    }
    .left-div .five{
        width: 105px;
        height: 50px; 
        
    }
    .left-div .five:hover{
        background-color: #01AC48;
    }
    .left-div .five span{
        width: 25px;
        height: 20px;
        display: inline-block;
        background-image: url(./千图网/common.png);
        background-position: 111px 247px; 
    }
    .left-div .six{
         width: 55px; 
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
        text-align: center;
        background-color: #01923D;
        border-radius: 5px;
    }
    .left-div .seven{
        width: 74px;
        font-size: 12px;
        margin-left: 6px;
        
    }
    .left-div .six a:hover{
        box-shadow: 0 0 3px #01923D;
    }
    .left-div .seven a{
        color: #888;
    }
    .daohang {
        height: 84px;
    }
    .daohang .logo{
        width: 200px;
        margin: 0;
         display: inline-block; 
    }
     
    .sousuo .quanzhan{
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }
    .top{
        margin-top: 15px;
        height: 120px;
    }
    .sousuo{
        height: 50px;
         line-height: 50px; 
         float: right; 
        /* border: 1px solid #ccc; */
        border-radius: 5px;
        width: 650px;
         margin-right: 300px; 
          /* margin-top: 10px;   */
    }
    .top-sousuo{
         width: 1000px; 
        height: 84px;
        /* background-color: red; */
        float: right;
        
    }
    .sousuo input{
        height: 30px;
        font-size: 16px;
        width: 480px;
        padding-left:5px; 
        
        border: none;
        border-left: 1px solid #ccc;
        /* margin-bottom: 1px; */
    }
    .sousuo input:focus {
        outline: none;
    }
     .sousuo button{
        width: 80px;
        height: 49px; 
        float: right;
        background-color: #11CA5E; 
        box-shadow: none;
        border: none;
    }
    .sousuo button span{
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url(./千图网/common.png);
        background-position: -65px -445px;
    }

    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .list li {
            float: left;
            margin-left: 10px;
            font-size: 13px;
        }

        .list li a {
            color: #000;
            text-decoration: none;
        }

        .list .a a {
            color: #30cd71;
        }


   *{
        box-sizing: border-box;
    }
    .box{
        /* width: 100%; */
        /* height: 320px; */
         /* margin: 0 auto;  */
        position: relative;
        background-color: #060606;
    }
    .box .container{
        margin: 0 auto;
        width: 1200px;
        height: 320px;
        /* border: 5px solid red; */
        /* text-align: center; */
    }
    .box .img-list li{
        width: 1200px;
        height: 320px;
        /* position: absolute;
        top :0;
        left: 350px; */
        display: none;
        
    }
    .box .img-list li.current{
        display: block;
    }
    .box-info{
        position: relative;
    }
    .indicator{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: center;
        color: #fff;
    }
    .indicator li{
        width: 14px;
        height: 14px;
        background-color: #999;
        text-align: center;
        /* line-height: 20px;
        margin:0 10px; */
        border-radius: 50%;
        cursor: pointer;
    }
    .indicator li.active{
        background-color: #01923d;
        
    }
    .indicator li:hover{
        background-color: #01923d;
    }

    .box .img-btn{
        width: 50px; 
        height: 100%;
        background-image: url("千图网/lun.png");
       background-position: 0 center;
       background-repeat: no-repeat;
       position: absolute;
       top: 0;
         display: none; 
    }
    .box .prev{
        /* top: 50%; */
        left:0;
    }
    .box .prev:hover{
        background-position: -153px center;
    }
    .box .next{
        background-position: -51px center;
        right: 0;
    } 
    .box .next:hover{
        background-position: -102px center;
    }   
     .img-list li img{
        width: 1200px;
        /* height: 400px; */
    } 

    main{
        width: 100%;
        height: 1500px;
    }
    main .container div{
        /* height: 500px; */
        margin-top: 100px;
         /* border: 1px solid red;  */
        /* float: left; */
        display: flex;
        /* margin-left: 150px; */
        
    }
    main .container div span{
        display: inline-block;
        width: 40px;
        height: 35px;
        background-image: url(./千图网/common.png);
        background-position: -90px -410px;
        float: left;
    }
     main .container .bottom-div span{
        display: inline-block;
        width: 32px;
        height: 35px;
        background-image: url(./千图网/common.png);
        background-position: -126px -410px;
     }
    main .container div h2{
        width: 200px;
        margin: 0;
        padding: 0;
        margin-right: -80px;
        float: left;
    }
    main .container div p{
        /* width: 1000px; */
        margin: 0;
        padding: 0;
        /* padding-top: 10px; */
        
    }
    main .container div p a{
        color: #bbb;
    }
    main .container div p a:hover{
        color: #FD9220;
    }
   main .container div .gengduo{
       margin-left: 450px;
   }
   main .container div .gengduo a{
       color: #bbb;
   }
   /* .clear{
       clear: both;
   } */
   main .container .top-div{
       height: 50px;
       margin: 0;
       width: 1200px;
   }
    main .container .top-div p{
       margin-top: 0;
   } 
   main .container .xianshi-imgs{
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
   }
   main .container .xianshi-imgs img{
       width: 290px;
       height: 200px;
       
   }
   main .container .bottom-div ul{
       margin-top: 6px;
       width: 420px;
       display: flex;
       justify-content: space-around;
   }
   main .container .bottom-div ul li a{
       /* background-color: red; */
       color: #bbb;
   }
   main .container .bottom-div ul li a:hover{
       color: #FD9220;
   }
      main .container .bottom-div .gengduo{
          margin-top: -3px;
          margin-left: 550px;
      }
      main .container .bottom-div{
          margin-top: 80px;
      }
      main .container .bottom-div ul{
          margin: 0;
          padding: 0;
      }

      main .container .bottom-imgs{
        margin-top: 10px; 
       display: flex;
       justify-content: space-between;
   }
   main .container .bottom-imgs img{
       width: 290px;
       height: 386px;
       
   }
   main .container .bottom-imgs p{
       color: #bbb;
       font-size: 15px;
   }
   
   footer{
       width: 100%;
        /* background-color: #999;  */
   }
   footer .container{
       display: flex;
       justify-content: space-around;
   }
   footer .right{
       width: 800px;
       height: 250px;
       /* border: 1px solid red; */
       display: flex;
       justify-content: flex-start
       
   }
   footer .right p{
       margin-bottom:-10px;
       margin: 0;
       padding: 0;
   }
   footer .right h5{
       margin: 0;
       padding: 0;
       height: 40px;
       color: #666;
   }
   footer .left{
       width: 400px;
       height: 250px;
       margin: 0;
       /* border: 1px solid red; */
       /* text-align: center; */
   }
   footer .right div{
       width: 150px;
       /* margin-left: -150px; */
       /* border: 1px solid red; */
   }
   footer .right div p a{
       color: #999;
       line-height: 30px;
       height: 30px;
       font-size: 12px;
      
   }
   footer .right div p a:hover{
       color:  #6DCC8B;
   }
   footer .left h4{
       padding: 0;
       margin: 0;
       margin-top: 2px;
       /* font-size: 24px; */
       color: #999;
   }
   footer .left span{
       display:inline-block;
       width: 30px;
       height: 30px;
       background-image: url(./千图网/common.png);
       background-position: 0px -167px;


   }
   footer .left .jiaotan{
       cursor: pointer;
        width: 150px;
       height: 40px;
       background-color: #10C55B;
       border: 1px solid #10C55B;
       border-radius: 2px;
       text-align: center;
       line-height: 40px; 

   }
   footer .left .phone span{
       display: inline-block;
       width: 30px;
       height: 30px;
       /* border: 1px solid red; */
       background-image: url(./千图网/common.png);
       background-position: -66px -170px;

   }
   footer .left .xiaoyouxiang{
       display: inline-block;
       width: 30px;
       height: 30px;
        /* border: 1px solid red; */
         background-image: url(./千图网/common.png);
       background-position: -35px -165px;

   }
   footer .left .left-div{
       margin-left: 100px;
   }
   .footer p a{
       color: #999;
       
       display: block;
       /* float: left; */
       margin-left: 15px;
   }
   .footer p{
       padding: 0;
       margin: 0;
       height: 60px;
       font-size: 10px;
         display: flex;
       justify-content: space-around; 
       /* margin-left: 20px; */
       line-height: 60px;
   } 
   /* .footer .container .p-right{
       margin-right: -50px;
   } */
   .footer .container{
         display: flex; 
        justify-content: space-between;  
        border-top: 1px solid #999;
   }
   .footer p span{
       margin: 15px;
       margin-left: 10px;
   }
    .footer p .weibo{
        display: inline-block;
        width: 30px;
        height: 30px;
        /* border: 1px solid red; */
        background-image: url(./千图网/common.png);
        background-position: -64px -204px;
        cursor: pointer;
    }
    .footer p .weixin{
        cursor: pointer;
         display: inline-block;
        width: 30px;
        height: 30px;
        /* border: 1px solid red; */
        background-image: url(./千图网/common.png);
        background-position: -34px -204px;
    }
    .footer p .tubiao{
        display: inline-block;
        width: 20px;
        height: 20px;
         margin: 20px 0 0 0;  
        /* border: 1px solid red; */
         background-image: url(./千图网/common.png); 
        background-position: -165px -20px;
        
    }
    .footer .p-right a:hover{
       color:  #6DCC8B;
        
    }
   
.top-sousuo .suosou-div{
    border: 1px solid #999;
}
  .bottom-imgs .first{
      width: 290px;
      height: 386px;
  }
  /* 内容 公共部分 */
.content-box{
    margin-top: 50px;
}
.content-title{
    margin-bottom: 20px;
    display: flex;
     justify-content: space-around; 
}
.content-title h2{
    font-weight: normal;
    font-size: 26px;
    /* width: 200px; */
    /* margin-right: 5px; */
}
.content-title h2::before{
    content: '';
    display: inline-block;
    width: 40px;
    height: 30px;
    background-image: url("./千图网/common.png");
    background-position: -90px -413px;
    position: relative;
     top: 5px;  
}
  .syhb h2::before{
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("./千图网/common.png");
    background-position: -126px -413px;
    position: relative;
     top: 5px;  
     padding-right: 2px;
}  
.content-title>ul{
    width: 1000px;
    display: flex;
     justify-content:space-between; 
    position: relative;
    top: 5px;
}
.content-list{
     display: flex;
     justify-content: space-between;  
}
.content-list>li{
    width: 290px;
    height: 200px;
    position: relative;
    overflow: hidden; 
    
}
.content-title ul li a{
    margin-top: 22px;
    color: #000;
}
.content-title ul li a:hover{
    color: #FD9129;
}
.corver{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s;
}
.content-list li:hover .corver{
    opacity: 1;
}

/* 精选专题 */
.jxzt .corver-info{
    width: 60%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 100%;
    left: 20%;
}
.jxzt .content-list li:hover .corver-info{
    top: 30%;
    transition: all 0.3s;
}

/* 商用海报 */
.syhb .content-list>li{
    height: 386px;
}
.corver-info{
    position: absolute;
    right: 20px;
    top: -90px;
    transition: all 0.3s;
}
.corver-info ul{
    display: flex;
    text-align: center;
}
.corver-info .download{
    width: 55px;
    height: 55px;
    background-image: url("./千图网/common.png");
    background-position: 0 -55px;
}
.corver-info .heart{
    width: 55px;
    height: 55px;
    background-image: url("./千图网/common.png");
    background-position: -55px -55px;
}
.corver-info .download:hover{
    background-position: 0 -111px;
}
.corver-info .heart:hover{
    background-position: -55px -111px;
}
.content-list>li:hover .corver-info{
    top: 20px;
}
.content-title ul{
      display: flex; 
     justify-content: flex-start;  
}
.syhb .content-title ul li{
    margin-left: 50px;
}
.syhb .content-title .gengduo{
    margin-top: 23px;
    color: #000;
}
.syhb .content-title .gengduo:hover{
     color: #FD9129;
}
.jxzt .content-title ul{
    display: flex;
    justify-content: space-between;
}
    </style>
</head>
<body>
<header>
    <div class="container">
        <div class="right-div">  
            <div class="one"><a href="#">首页</a></div>
            <div class="two"><a href="#">所有分类&or;</a></div>
            <div class="three"><a href="#">创意设计</a></div>
            <div class="three"><a href="#">办公创意</a></div>
            <div class="four"><a href="#">...</a></div>
        </div>
        <div class="left-div">
            <div class="five"><a href="#"><span></span>VIP中心</a></div>
            <div class="six"><a href="#">请登录</a></div>
            <div class="seven"><a href="#">免费注册</a></div>
        </div>
        
    </div>
</header>
<div class="top">
    <div class="container">
        <div class="daohang">
            <a class="logo" href="#"><img src="./千图网/123.png" alt=""></a>
            <div class="top-sousuo">
                <div class="sousuo">
                    <div class="suosou-div"><div class="quanzhan">全站&or;</div>
                    <input type="input" placeholder="800万免费设计素材任意下载">
                    <button type="button">
                 <span></span>
             </button></div>
                    
                <div class="list">
                <ul>
                    <li>热门搜索：</li>
                    <li class="a"><a href="">七夕</a></li>
                    <li><a href="">详情页</a></li>
                    <li class="a"><a href="">icon</a></li>
                    <li><a href="">主页</a></li>
                    <li class="a"><a href="">秋季</a></li>
                    <li class="a"><a href="">PPT模板</a></li>
                    <li><a href="">EXCEL模板</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">个人简历</a></li>
                    <li class="a"><a href="">装饰画</a></li>
                </ul>
            </div>

                </div>
            </div>




        </div>


    </div>
</div>



<div class="box">
    <div class="container box-info">
         <ul class="img-list">
        <li class="current"><a href="#"><img src="./千图网/banner01.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner02.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner03.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner04.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner05.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner06.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner07.jpg" alt=""></a></li>
        <li><a href="#"><img src="./千图网/banner08.jpg" alt=""></a></li>
        
    </ul>
    <ul class="indicator">
        <li class="active"></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    </div>
<a href="#" class="img-btn prev"></a>
<a href="#" class="img-btn next"></a>
</div>
    </div>

    <!-- 精选专题 -->
    <div class="container">
        <div class="jxzt content-box">
            <div class="content-title">
                <h2>精选专题</h2>
                <ul>
                    <li><a href="#">100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</a></li>
                    <li><a href="#">更多 >></a></li>
                </ul>
            </div>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <img src="./千图网/jxzt01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/jxzt02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/jxzt03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/jxzt04.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <h3>爱的元素背景</h3>
                            <p>牛郎织女，鹊桥相会</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 商用海报 -->
    <div class="container">
        <div class="syhb content-box">
            <div class="content-title">
                <h2>商用海报</h2>
                <ul>
                    <li><a href="#">招聘海报</a></li>
                    <li><a href="#">配图海报</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">促销海报</a></li>
                    <li><a href="#">原创插画</a></li>
                </ul>
                 <a class="gengduo" href="#">更多 >></a>
            </div>
            <ul class="content-list">
                <li>
                    <a href="#">
                        <img src="./千图网/syhb01.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/syhb02.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/syhb03.jpg" alt="">
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./千图网/syhb04.jpg" alt="">
                        <!-- <p>123456</p> -->
                        <div class="corver"></div>
                        <div class="corver-info">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="download"></div>
                                        <p>75</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="heart"></div>
                                        <p>45</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>








<footer>
    <div class="container">
        <div class="right">
            <div class="right-1">
                <h5>常见问题</h5>
                <p><a href="">成为特邀设计师</a></p>
                <p><a href="">成为原创贡献者</a></p>
                <p><a href="">注册登录</a></p>
                <p><a href="">账号/密码</a></p>
                <p><a href="">充值/售后</a></p>
                <p><a href="">版权投诉</a></p>
            </div>
            <div class="right-2">
                <h5>关于千图网</h5>
                <p><a href="">关于我们</a></p>
                <p><a href="">媒体报道</a></p>
                <p><a href="">加入我们</a></p>
                <p><a href="">心系千图</a></p>
                <p><a href="">每日最新</a></p>
            </div>
            <div class="right-3">
                <h5>产品服务</h5>
                <p><a href="">官方博客</a></p>
                <p><a href="">帮助中心</a></p>
                <p><a href="">千图导航</a></p>
            </div>
            <div class="right-4">
                <h5>友情链接</h5>
                <p><a href="">我图网</a></p>
                <p><a href="">千库网</a></p>
                <p><a href="">摄图网</a></p>
                <p><a href="">包图网</a></p>
                <p><a href="">视达网</a></p>
                <p><a href="">更多>></a></p>
            </div>
        </div>

        <div class="left">
            <div class="left-div">
            <a href="#"><h4>客服咨询</h4></a>
            <p class="phone"><span></span>400-998-7011 （9:00-18:00）</p>
            <p class="youxiang"><span class="xiaoyouxiang"></span>feedback@58pic.com</p>
            <p class="jiaotan"><span></span>&#x3000;点我交谈</p>
            </div>
            
        </div>
    </div>

</footer>

<footer class="footer">
    <div class="container">
        <p class="p-right">
            <span class="weibo"></span>
            <span class="weixin"></span>
            <a href="#">注册声明</a>
            <a href="#">版权声明</a>
            <a href="#">售后服务</a>
            
        </p>
        <p>Copyright ©2013-2017 千图网
            <a href="#"> 沪ICP备10011451号-6</a><span class="tubiao"></span>上海工商 安全实名验证 信用网站</p>
    </div>
</footer>






</body>
</html>

<script>
    
    window.onload=function(){
        // 第一步 找标签
        var box=document.querySelector('.box')
        var imgLis=document.querySelectorAll('.img-list li');
        var indicatorLis=document.querySelectorAll('.box .indicator li');
        var prev=document.querySelector('.box .prev');
        var next=document.querySelector('.box .next');
        
        // 记录当前图片的索引值
        var index=0;
        
        var bgColorArr = ['#060606','#feff0f','#fdf100','#2c9bff','#89dce3','#fef8b3','#110204','#f4cad8'];
         // 展示图片
        function showImg(){
            for(var i=0;i<imgLis.length;i++){
                imgLis[i].className='';
                indicatorLis[i].className='';
            }
            // console.log(index);
            imgLis[index].className='current';
            indicatorLis[index].className='active';
            box.style.backgroundColor = bgColorArr[index];
        }
        // 上一张
        function prevImg(){
            index=index==0?imgLis.length-1:index-1;
            console.log(index);
            showImg();
        }
        // 下一张
        function nextImg(){
            index=index==imgLis.length-1? 0 : index+1;
            showImg();
        }

       

        // 1.自动切换图片
        var timer=setInterval(nextImg,1000);
         // 鼠标进入容器，自动切换停下来
        box.onmouseover=function(){
            clearInterval(timer);
            timer=null;
            prev.style.display='block';
            next.style.display='block';
        }
        box.onmouseout=function(){
            
            timer=setInterval(nextImg,1000);
            prev.style.display='none';
            next.style.display='none';
            if(timer!=null){
                // 定时器已经开启，不要重复开启
                return;
            }
             timer = setInterval(nextImg,1000);

        }

        // 2.指示灯点击切换图片
        for(var i=0;i<indicatorLis.length;i++){
            indicatorLis[i].index=i;
            indicatorLis[i].onclick=function(){
                index=this.index;
                showImg();
            }
        }

       
        // 3.点击按钮切换
        // 点击 上一张
        prev.onclick=function(){
            prevImg();
        }
        // 点击 下一张
        next.onclick=function(){
            nextImg();
        }


       
     var input=document.querySelector('.sousuo input');
        var sousuo=document.querySelector('.sousuo .suosou-div');
        input.onfocus=function(){
            sousuo.style.borderColor = '#10c55b';
        }
        input.onblur = function(){
    sousuo.style.borderColor = '#999';
}
    }
</script>